<template>
  <vxe-table align="center" :data="state.tableList">
    <vxe-column type="seq" title="序号" width="60" />
    <vxe-column
      field="sortIndex"
      title="位置"
      :formatter="
        ({ cellValue }) => {
          if (cellValue > props.data?.boxCols) {
            return `${Math.ceil(cellValue / props.data?.boxCols)}-${(cellValue % props.data?.boxCols) + 1}`;
          } else {
            return '1-' + (cellValue + 1);
          }
        }
      "
    />
    <vxe-column field="originalSerial" title="样本编号" />
    <vxe-column field="name" title="样本名称" />
    <vxe-column
      field="extDataList"
      title="样本类型"
      :formatter="
        ({ row }) => {
          return row.extDataList?.find((item) => item?.key === 'specimen_type')?.value;
        }
      "
    />
    <vxe-column field="serial" title="数字编号" />
    <vxe-column field="capacity" title="容量" :formatter="({ row }) => `${unitCheck(row.capacity, row.countUnit)}`" />
    <vxe-column field="projectName" title="项目组" />
    <vxe-column field="sampleAddress" title="采样地点" />
    <vxe-column field="preservUserName" title="负责人" />
    <vxe-column title="操作" width="150px">
      <template #default="{ row }">
        <div style="display: flex; justify-content: space-evenly">
          <Button size="small" type="blue-white" @click="emits('view', row)">查看</Button>
          <Button size="small" type="blue-white" @click="emits('dividedPackages', row)">分装</Button>
        </div>
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import Button from '@/framework/components/basic/button/button.vue';
import { unitCheck } from '@/libs/utils';

export type SubTableState = {
  tableList: any[];
};

const props = defineProps<{
  data: any;
}>();
const emits = defineEmits<{
  (e: 'view', data: any): void;
  (e: 'dividedPackages', data: any): void;
}>();
const state: SubTableState = reactive({
  tableList: [],
});

watch(
  () => props.data,
  (newVal) => {
    state.tableList = newVal?.subSpecimens ?? [];
  },
  {
    immediate: true,
  },
);
</script>

<style scoped lang="less"></style>
